<head>
<link type="text/css" rel="stylesheet" href="${rc.contextPath}/styles/default.css" />
<link type="text/css" rel="stylesheet" href="${rc.contextPath}/styles/registerStep/default.css" />
<link type="text/css" rel="stylesheet" href="${rc.contextPath}/styles/tools/jquery.autocomplete.css" /> 
<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.autocomplete.min.js"></script>
<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.ui.widget.min.js"></script>   
<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.ui.button.js"></script>
<script type="text/javascript" src="${rc.contextPath}/scripts/easySlider1.7.js"></script>
<script type="text/javascript" src="${rc.contextPath}/dwr/interface/UserManagerExt.js"></script>
<script type="text/javascript" src="${rc.contextPath}/dwr/engine.js"></script>  
<script type="text/javascript" src="${rc.contextPath}/scripts/page.registerStep.js"></script>
<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.lightweight.blockUI.js"></script>
</head>
<#if userSession?exists && welcome?exists>
<div class="message" id="registerSuccessful" style="margin-top:15px;display: none;">
    
    <!--div class="messageContent" style="margin-left:5px;">
		<span class="icon_1 register"></span>
        <h2 style="padding-left:50px">Đăng ký thành công!</h2>
        <p style="padding-left:50px">Bạn đã đăng ký thành công để trở thành thành viên của iGoal. <b>Hãy kiểm tra email để kích hoạt tài khoản của bạn.</b></p>
    </div-->    
    <div class="clear"></div>
</div>
</#if>
<div class="overStep UsePositionRelative">

    <div class="UsebackgroundHorizontal UsePositionAbsolute overStepLine"></div>
    <!--Add class .passStep at li tag      (){$(this).addClass("passStep");}          //when pass step. Default set for step 1-->
        <ol>
            <li class="passStep">
                <span class="step1">
                    <label>CHỌN DANH MỤC</label>
                </span>
            </li>
            <li>
                <span class="step2">
                    <label>GỬI THƯ MỜI</label>
                    <b class="UsebackgroundHorizontal"></b>
                </span>
            </li>
            <li>
                <span class="step3">
                    <label>KẾT NỐI</label>
                    <b class="UsebackgroundHorizontal"></b>
                </span>
                <span class="endstep"></span>
            </li>
        </ol>
</div>
<div align="center">
    <div class="mainRegisterAlign">
    	<div class="HomeCategory" id="chooseCategory" style="margin-left:115px;">
			<div class="CateHeader">
    			<div class="headerText">Lựa chọn 4 lĩnh vực mà bạn quan tâm nhất:</div>
    		</div>
	    	<div class="CateContent">
	    		<ul id="category_container">
	        		<li>
	        			<#assign cate1=""/>
	        			<#if selected1??>
	        				<#assign cate1="selected1"/>
	        			</#if>
	            		<a href="#" class="Cate1 ${cate1}" rel="1"></a>
	               		<div class="clearthis"></div>
	                	<p>TÀI CHÍNH</p>
	            	</li>
		            <li>
		           		<#assign cate2=""/>
	        			<#if selected2??>
	        				<#assign cate2="selected2"/>
	        			</#if>
	    	        	<a href="#" class="Cate2 ${cate2}" rel="2"></a>
	        	        <div class="clearthis"></div>
	             	    <p>CÔNG VIỆC</p>
	            	</li>
	            	<li>
	            		<#assign cate3=""/>
	        			<#if selected3??>
	        				<#assign cate3="selected3"/>
	        			</#if>
	            		<a href="#" class="Cate3 ${cate3}" rel="3"></a>
	               		<div class="clearthis"></div>
	                	<p>SỨC KHỎE</p>
	            	</li>
	            	<li>
	            		<#assign cate4=""/>
	        			<#if selected4??>
	        				<#assign cate4="selected4"/>
	        			</#if>
	            		<a href="#" class="Cate4 ${cate4}" rel="4"></a>
	               		<div class="clearthis"></div>
	                	<p>DU LỊCH</p>
	            	</li>
	            	<div class="clearthis"></div>
		            <li>
		            	<#assign cate5=""/>
	        			<#if selected5??>
	        				<#assign cate5="selected5"/>
	        			</#if>
	    	        	<a href="#" class="Cate5 ${cate5}" rel="5"></a>
	        		    <div class="clearthis"></div>
	                	<p>KỸ NĂNG</p>
	            	</li>
		            <li>
		            	<#assign cate6=""/>
	        			<#if selected6??>
	        				<#assign cate6="selected6"/>
	        			</#if>
		            	<a href="#" class="Cate6 ${cate6}" rel="6"></a>
		               <div class="clearthis"></div>
		                <p>GIẢI TRÍ</p>
		            </li>
		            <li>
		            	<#assign cate7=""/>
	        			<#if selected7??>
	        				<#assign cate7="selected7"/>
	        			</#if>
		            	<a href="#" class="Cate7 ${cate7}" rel="7"></a>
		               <div class="clearthis"></div>
		                <p>HỌC TẬP</p>
		            </li>
		            <li>
		            	<#assign cate8=""/>
	        			<#if selected8??>
	        				<#assign cate8="selected8"/>
	        			</#if>
		            	<a href="#" class="Cate8 ${cate8}" rel="8"></a>
		               <div class="clearthis"></div>
		                <p>TÌNH YÊU</p>
		            </li>
		        </ul>
        		<div class="cateContBound">
       				<a class="cateCont" href="javascript:passStep1();">Tiếp tục</a>
    			</div>
    		</div>
		    <div class="CateFooter">
    		</div>
		</div>
        <!--1-->
            <!--<div id="findFriend" class="slideStep">
                <div class="tipMess UsePositionRelative">
	                <dl>
	                    <dt class="l"></dt>
	                    <dd>Thông tin tìm kiếm:</dd>
	                    <dt class="r"></dt>
	                </dl>
	                <span></span>
	            </div>
	            <div class="clear FriendsearchBox ">
	                <input type="text" name="searchF" id="searchF" class="autocomplete"/>
	                <div class="iGoal_button button1">
	                    <a href="javascript:void(0);">
	                        <ol>
	                            <li class="l"></li>
	                            <li class="m" id="searchFButton">Tìm kiếm</li>
	                            <li class="r"></li>
	                        </ol>
	                    </a>
	                </div>
	                <div class="showHide_searchResult">          -->      
	                <!--use ajax $('.showHide_searchResult').html(begin or result) -->
	                    <!--bengin                  // remove style="display:none;" when apply code-->
	                    <!--<p><span class="icon"></span>Hãy điền thông tin liên quan đến người bạn muốn tìm trên iGoal, như <b>email, tên tài khoản, họ tên...</b> Hệ thống sẽ giúp bạn tìm ra bạn bè, người thân của bạn dựa trên những thông tin đó.</p>  -->                                       
	                    <!--End bengin-->	                    
	             <!--   </div>
	            </div>
	            <div class="UsePositionRelative nextStepAPI clear">
	                <div class="iGoal_button button2">
	                    <a href="javascript:passStep1();">
	                        <ol>
	                            <li class="l"></li>
	                            <li class="m">Tiếp tục</li>
	                            <li class="r"></li>
	                        </ol>
	                    </a>
	                </div>
	                <div class="clear"></div>
	            </div>
        	</div>-->
        <!--1-->
        <!--2-->
    	<div class="HomeCategory" id="InviteFriend" style="margin-left:115px; display: none;">
			<div class="CateHeader">
		        <a class="homeSkip" href="javascript:registerComplete();"></a>
    		</div>
   			<div class="CateContent" style="padding-top:30px">
        		<div class="InviteFriend slideStep"  style="padding-left:30px;" >
            		<div class="tipMess UsePositionRelative">
		                <dl>
		                    <dt class="l"></dt>
		                    <dd>Chọn bạn bè trong:</dd>
		                    <dt class="r"></dt>
		                </dl>
		                <span></span>
            		</div>
            		<div>
		                <div class="clear FriendsearchAPI ">
		                    <ol>
		                        <li class="logoGmail">Gmail</li>
								<li class="logoYahoo">yahoo</li>
		                        <li class="logoFaceBook">facebook</li>
		                        <li class="logoHotmail">hotmail</li>
		                    </ol>                                         
		                </div>            
		                <!--step1-->
		                <div class="FriendsearchAPIStep" style="display:none">                    
		                    <h3>Tại sao bạn nên sử dụng chức năng này ?</h3>
		                    
		                        <p style="line-height:130%">- Là cách <b>nhanh nhất để bạn kết nối</b> với bạn bè mình.   <br/>                 
		                        <b>- Giới thiệu iGoal</b> cho bạn bè để thêm bạn thêm vui!<br/>
		                        - Bạn sẽ dễ dàng kiếm bạn bè của mình trên <b>iGoal.</b></p>                    
		                                      
		                </div>       
		                <!--step1-->                        
		                <!--step2-->
	                    <dl class="inputFormApi findFriendEdit">
	                        <dd>
	                            <label>
	                                Đăng nhập vào email của bạn
	                            </label>
	
	
	                            <input type="text" value="Tài khoản Gmail" id="txtUN"/>
	                            <input type="text" value="Mật khẩu" id="txtPW"/>
	                            <input type="password" value="" id="pwPW" style="display: none;"/>
	                            <br />
	                            <div class="currentLogo Min_gmail">Gmail</div>
	                            <!--<div class="iGoal_button button3 button3_1"> change button3_1 when "Đang tìm kiếm" -->
	                            <div class="iGoal_button button3">
	                                <a href="#" id="findFriendInMail">
	                                    <ol>
	                                        <li class="l"></li>
	                                        <li class="m">Tìm kiếm bạn bè</li>
	                                        <li class="r"></li>
	                                    </ol>
	                                </a>
	                            </div>
	                            <div class="clear"></div>
	                        </dd>
	                        <dt>
	                            <label>Quy định bảo mật thông tin !!!!</label>
	                            <p><span class="iGoal_validate notification">Notification</span>Để mời bạn bè của bạn, hệ thống sẽ yêu cầu bạn <b>nhập tài khoản và mật khẩu mail của bạn</b>. Vì lý do đó , <b>iGoal cam kết không lưu lại bất cứ thông tin</b> về tài khoản và mật khẩu email hay facebook của bạn.</p>                        
	                        </dt>
	                    </dl>
	                    <div id="loader" style="display:none;">
	                    	<center><img src="/images/loader.gif"/></center>
	                    </div>
		                <!--step2-->                                    
            		</div>        
        		</div>
         		<!--step3--> 
    			<div class="InviteFriendResult clear slideStep" style="">
		            <div class="m">
		                <div class="iHeader">
		                    <input type="checkbox" id="checkAll" /><label for="checkAll"><b>Chọn tất cả</b></label>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
		                    <span>Đã chọn <strong id="contactSelected">0</strong> bạn bè</span>
		                </div>
                        <div class="clearthis"></div>
		                <div class="iMain">
		                    <ul id="contactList">                                                 
		                    </ul>
		                    <div class="clear"></div>
		                </div>
		                <div class="iMainGoBack UsePositionRelative">
		                    <span class="UsePositionAbsolute" id="backtoStep2">Chọn dịch vụ khác để mời bạn</span>
		                    <div class="iGoal_button button3 UsePositionAbsolute">
		                        <a href="javascript:registerComplete();">
		                            <ol>
		                                <li class="l"></li>
		                                <li class="m">Gửi thư mời</li>
		                                <li class="r"></li>
		                            </ol>
		                        </a>
		                    </div>                       
		                </div>
		            </div>
		        </div>
        		<!--step3--> 
        		<!--Finish-->   
        		<div class="inviteFriendMessage" id="inviteFriendFinish" style="display: none">
            		<span></span>
					<h1>Đăng ký thành công!</h1>
                    <p>Để sử dụng hết tất cả các chức năng tại iGoal, hệ thống yêu cầu bạn phải <b>xác nhận email</b>.<br/>
					Bạn sẽ nhận được email thông báo về việc này. <b style="color:#F60;font-size:14px;font-weight:bold;text-decoration:underline">Hãy kiểm tra hộp thư của bạn</b>.
					</p>

		         	
        		</div>            
        		
        	</div>
        	<div class="CateFooter">
    		</div>
		</div>
    </div>
</div>
